@import "../variables";

.#{$component-prefix}typography {
  color: rgba(0, 0, 0, .65);
  font-size: 16px;
}

.#{$component-prefix}typography-secondary {
  color: rgba(0, 0, 0, .45);
}

h1.#{$component-prefix}typography {
  margin-bottom: .5em;
  color: rgba(0, 0, 0, .85);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.23;
}

h2.#{$component-prefix}typography {
  margin-bottom: .5em;
  color: rgba(0, 0, 0, .85);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.35;
}

h3.#{$component-prefix}typography {
  margin-bottom: .5em;
  color: rgba(0, 0, 0, .85);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.35;
}

h4.#{$component-prefix}typography {
  margin-bottom: .5em;
  color: rgba(0, 0, 0, .85);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
}
